<template>
    <div class="search-history">
        <!-- 搜索历史 标题栏 -->
        <van-cell title="历史搜索" class="history-title" :border="false">
            <van-icon name="delete" @click="$emit('clearSearchHistories')" />
        </van-cell>

        <!-- 搜索历史 内容栏 -->
        <van-cell class="history-content" :border="false">
            <span
                v-for="(item, index) in searchHistories"
                :key="index"
                @click="onClickHistory(item)"
            >
                {{ item }}
            </span>
        </van-cell>
    </div>
</template>

<script>
export default {
    props: {
        searchHistories: {
            type: Array,
            required: true
        }
    },
    methods: {
        onClickHistory(item) {
            this.$emit('search', item);
        }
    }
};
</script>

<style lang="scss" scoped>
.search-history {
    text-align: left;
    background-color: #fff;
    padding: 0 40px;
    /deep/ .van-cell {
        padding: 0;
        color: #000;
        font-size: 28px;
        line-height: 80px;
    }
    /deep/ .van-icon-delete {
        position: absolute;
        right: 0;
        top: 20px;
        color: #000;
        font-size: 40px;
    }
    .history-content {
        span {
            display: inline-block;
            margin-right: 20px;
            padding: 0 10px;
            height: 56px;
            font-size: 28px;
            line-height: 56px;
            color: #777;
            background-color: #eee;
            border-radius: 8px;
        }
    }
}
</style>
